<template>
  <div class="box">
    <header>
      <van-sticky>
        <van-nav-bar title="患者案例详情"  left-arrow @click-left="onClickLeft">
          <template #right>
            <svg
              t="1734316255094"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5319"
              width="70"
              height="70"
            >
              <path
                d="M512 42.666667a32 32 0 0 1 0 64C288.149333 106.666667 106.666667 288.149333 106.666667 512s181.482667 405.333333 405.333333 405.333333 405.333333-181.482667 405.333333-405.333333a32 32 0 0 1 64 0c0 259.2-210.133333 469.333333-469.333333 469.333333S42.666667 771.2 42.666667 512 252.8 42.666667 512 42.666667z m233.685333 119.466666l2.282667 2.069334 90.496 90.496a32 32 0 0 1 2.090667 42.986666l-2.090667 2.282667-90.496 90.496a32 32 0 0 1-47.338667-42.965333l2.069334-2.282667 35.882666-35.882667H661.333333a138.666667 138.666667 0 0 0-138.581333 133.696L522.666667 448v128a32 32 0 0 1-63.850667 3.072L458.666667 576v-128a202.666667 202.666667 0 0 1 196.906666-202.581333L661.333333 245.333333h77.248l-35.882666-35.882666a32 32 0 0 1-2.069334-42.965334l2.069334-2.282666a32 32 0 0 1 42.986666-2.090667z"
                fill="#111111"
                p-id="5320"
                data-spm-anchor-id="a313x.search_index.0.i1.551d3a81c7R6GJ"
              ></path>
            </svg>
          </template>
        </van-nav-bar>
      </van-sticky>
    </header>
    <main>
      <div>
        <span class="prompt"
          >重要提示：本内容不能作为治疗依据，如有不适请到医院进行科学治疗</span
        >
      </div>
      <div class="title">{{ item.title }}</div>
      <div class="content">
        <div>
          <img class="avatar" :src="item.avatar" alt="" />
        </div>
        <div class="headTopRight">
          <div class="headname">
            <span class="name">{{ item.name }}</span>
            <span class="position">{{ item.type }}</span>
          </div>
          <div class="headaddr">
            <span>首都医科大学宣武医院</span>
          </div>
        </div>
      </div>
      <div class="al">
        <span class="alTitle">{{ item.cases }}</span>
        <span class="jbbk">疾病百科></span>
      </div>
      <div class="bz">
        <div class="bzOne">
          <div class="bz1">疾病</div>
          <div class="bz3">{{ item.cases }}</div>
        </div>
        <div class="bzTwo">
          <div class="bz2">症状</div>
          <div class="bz4">{{ item.content[0].ltte }}</div>
        </div>
      </div>
      <div class="info" v-for="(i, n) in item.content" :key="n">
        <span class="infoTitle">{{ i.ltte }}</span>
        <img class="infoImg" :src="i.img" alt="" />
        <span class="infoCpap">{{ i.cpap }}</span>
      </div>
      <div class="comment">
        
      </div>
    </main>

    <footer v-if="show==false">
      <!-- 评论框 -->
      <input
        type="text"
        v-model="inputVal"
        placeholder="说两句..."
        class="pl"
        @keyup.enter.native="pingl"
      />
      <!-- 富文本编辑器 -->
      
      <!-- 收藏按钮 -->
      <div @click="star">
        <van-icon :color="starnum == 1 ? '#a0a0a0' : 'yellow'" name="star" />
        <p>收藏</p>
      </div>
      <div @click="like">
        <van-icon :color="likenum == 1 ? '#a0a0a0' : 'red'" name="like" />
        <p>{{ item.collect }}</p>
      </div>
      <div @click="share">
        <van-icon color="#a0a0a0" name="share-o" />
        <p>分享</p>
      </div>
    </footer>
    <footer v-else>
       <div class="wel" >
        <div class="btn">
          <button @click="submit">提交</button>
          <button @click="getHtml">获取HTML</button>
          <button @click="getText">获取TEXT</button>
          <button @click="editorDisable = !editorDisable">
            {{ editorDisable ? "启用" : "禁用" }}
          </button>
        </div>
        <div class="editor-container">
          <Editor
            ref="EditorRef"
            :disable="editorDisable"
            v-model:value-html="editorValue"
            @on-change="editorChange"
          />
        </div>
      </div>
    </footer>
    
  </div>
</template>
<script setup lang="ts">
import "../caseDetail/index.css";
import { ref } from "vue";
import { useRoute } from "vue-router";
const inputVal = ref ('')
const route = useRoute();
const item = ref(JSON.parse(decodeURIComponent(route.query.item)));
console.log(item.value);
import { showToast } from 'vant';
const starnum = ref (1)
const star = ()=>{
if(starnum.value == 1){
  starnum.value = 2
  showToast('收藏成功');
}else{
  starnum.value = 1
  showToast('取消收藏');
}
}

const likenum = ref (1)
const like = ()=>{
if(likenum.value == 1){
  likenum.value = 2  
  item.value.collect++
  showToast('点赞成功');
}else{1
  likenum.value = 1
  item.value.collect--
  showToast('取消点赞');
}
}
const show = ref(false)
const pingl = ()=>{
  show.value = true

}

import Editor from '../../components/Editor/index.vue'
import { onMounted,shallowRef } from 'vue'
import type { IDomEditor } from '@wangeditor/editor'

let editorValue = ref('') // 提交的数据
let editorDisable = ref(false)
let EditorRef = shallowRef<InstanceType<typeof Editor>>()

onMounted(() => {
  setTimeout(() => {
    editorValue.value = '<h1>回显测试</h1>'
  }, 3000)
})

const submit = () => {
  console.log(editorValue.value)
  show.value = false
}
const getHtml = () => {
  console.log(EditorRef.value?.getHtml())
}
const getText = () => {
  console.log(EditorRef.value?.getText())
}
const editorChange = (editor: IDomEditor) => {
  console.log(editor.getHtml())
  console.log(editor.getText())
}
import {  useRouter } from "vue-router";
const router = useRouter();
const onClickLeft = () => {
  router.push('/case')
  
}
</script>
